<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="tabReturn">
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>举报</p>
			<span @click="submission">提交</span>
		</div>
		<div class="report">
			<h4>选择举报原因</h4>
			<ul class="report-list">
				<li v-for="(item,index) in reportArr" @click="onType(index,item)">
					<p>{{item}}</p>
					<span><img :src="index==reportIndex?selects:unchecked"/></span>
				</li>
			</ul>
			<h4>文字补充</h4>
			<div class="report-text">
				<textarea placeholder="请输入文字"  @input="onChangeValue"></textarea>
			</div>
		</div>
		
	</div>
</template>

<script>
	import axios from "axios";
	import qs from 'qs';
	import user from '@/utils/isLogin';
	export default{
		data(){
			return{
				reportArr:['广告','色情','政治有害','其他(辱骂，恶意灌水)'],
				unchecked:require('../../../assets/images/home/unchecked.png'),
				selects:require('../../../assets/images/home/select.png'),
				reportIndex:0,
				articleId:'',
				reportType:'广告',
				reportValue:''
			}
		},
		created(){
			//帖子id
			var reportCurr = plus.webview.currentWebview();
			this.articleId = reportCurr.articleId;
					
			let plusReady = ()=>{
				
			};
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener("plusready", plusReady, false);
			}
		},
		components:{
			
		},
		methods:{		
			//关闭当前窗口
			tabReturn(){
				var currentPage = plus.webview.currentWebview();
				plus.webview.close(currentPage);
			},
			onType(index,item){
				this.reportIndex = index;
				this.reportType = item;
			},
			onChangeValue(e){
				this.reportValue = e.target.value;
			},
			//提交
			submission(){
				if(this.reportValue == ''){
					plus.nativeUI.toast('举报内容不能为空~')
				}else{
					var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;				
					var data = qs.stringify({
						userid:userId,
						type:this.reportType,
					   articleid:this.articleId,
					   desc:this.reportValue
					})
					axios({
					   method: 'post',
					   url: user.src + '/index/Feedback/to_report',
					   data:data
					})
					.then(res => {
						if(res.data.status == 1069){
							plus.nativeUI.toast(res.data.mesg);
						}
						if(res.data.status == 200){						
							var currentPage = plus.webview.currentWebview();
							plus.webview.close(currentPage);
							plus.nativeUI.toast('举报成功')
						}
					})
					.catch(error => {
					    console.log(error);
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
	html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;	
		display:flex;
		justify-content: space-between;
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			color: #fff;
			font-size: 28px;
			text-align: center;
			text-indent: 50px;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.report{
		h4{
			height: 66px;
			line-height: 66px;
			background:#f6f6f6 ;
			font-size: 22px;
			color: #a1a1a1;
			padding-left: 33px;
			font-weight: normal;
		}
		.report-list{
			background: #fff;
			padding: 0 30px;
			li{
				height: 128px;
				border-bottom: 0.1rem solid #ececec;
				display: flex;
				align-items: center;
				justify-content: space-between;
				span img{
					width: 48px;
					height: 48px;
				}
			}
		}
	}
	.report-text{
		padding: 0 30px;
		background: #FFFFFF;
		textarea{
			width: 100%;
			height: 200px;
			padding: 20px 0;
			border: 0;
			resize: none;
			outline: none;
		}
	}
</style>